import React, { Component } from 'react';
//引入一个list的组件

import { Scroller, Touchable, List, Carousel  } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js'
import yoHistory from '$common/history';
import './index.scss';

class HomePage extends Component {

    constructor() {
        super();
        this.state = {
            getData:[
                {key:1}
            ]
        };
    }
    
    componentDidMount() {
        fetch('http://oyodho8ih.bkt.clouddn.com/db/dbRecord.2json')
            .then((response)=> {
                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }
                return response.json();
            })
            .then((stories)=> {
                const getData = stories;
                this.setState({
                    getData
                })
            });
    }
        
    render() {
        var text = false;
        let guid = -1;
    //     <div className="container" ref='refContainer'>
    //     <div className="pojoro">&#9679;
    //     <Touchable touchClass="m-content-active" onTap={() => {
    //         setTimeout(()=>{
    //             this.refs.refContainer.style.display="none"
    //         },2000);
    //     }}>
    //         <p className="support">
    //             <em>Hover me!</em>
    //         </p>
    //     </Touchable>
    //     </div>
    // </div>
        return (
                    <div className="yo-flex">
                        
                        <Header title="个人简历" left={false}/>
                        {/*中间滚动的履历栏目*/}
                        <Scroller extraClass="flex"
                        ref='list'
                        usePullRefresh={true}
                        onRefresh={() => {
                            setTimeout(() => {
                               //  this.refresh();
                                this.refs.list.stopRefreshing(true);
                            }, 500);
                        }}
                        useLoadMore={true}
                        onLoad={() => {
                            setTimeout(() => {
                               //  this.fetch();
                                this.refs.list.stopLoading(true);
                            }, 500);
                        }}
                        >
                                <Carousel
                                    delay={3}
                                >
                                    <li className="item">
                                        <img className="img" src="http://oyodho8ih.bkt.clouddn.com/slidesImages/school1.jpg" alt="南昌大学"/>
                                    </li>
                                    <li className="item">
                                        <img className="img" src="http://oyodho8ih.bkt.clouddn.com/images/purple.jpg" alt="紫川科技"/>
                                    </li>
                                    <li className="item">
                                        <img className="img" src="http://oyodho8ih.bkt.clouddn.com/slidesImages/school2.jpg" alt="南昌大学"/>
                                    </li>
                                    <li className="item">
                                        <img className="img" src="http://oyodho8ih.bkt.clouddn.com/images/kaifeng.jpg" alt="凯峰软件"/>
                                    </li>
                                </Carousel>
                            {/*普通列表页*/}
                            <List
                                dataSource={this.state.getData}
                                renderItem={(item,i)=>{
                                    return (
                                        <div className="m-sight-comment-card g-gray">
                                            <div className="title">
                                                <span className="nickname" style={{fontWeight:'700'}}>{item.title}</span>
                                                <span className="g-flex g-text-right time">{item.date}</span>
                                            </div>
                                            <div className="comment-wrap">
                                                <div className="comment">
                                                    <ul>
                                                        <li>{item.work1}</li>
                                                        <li>{item.work2}</li>
                                                        <li>
                                                            {item.work3}
                                                            <ul style={{paddingLeft:'.2rem',marginTop:'.1rem'}}>
                                                                {
                                                                    item.mywork?
                                                                    item.mywork.map((item,i)=>{
                                                                        return(
                                                                            <li key={i}>{item.mywork}</li>
                                                                        )
                                                                    }):
                                                                    console.log('')
                                                                }
                                                            </ul>
                                                        </li>                                                        
                                                    </ul>
                                                </div>
                                                <div className="btn-show-more ">
                                                    <i></i>
                                                </div>
                                                <div className="album">
                                                {
                                                    item.url?
                                                    item.url.map((url,i)=>{
                                                        return(
                                                        <img key={i} height="100" className="pic g-no-photo" src={url.url} />
                                                    )
                                                    }):
                                                    console.log('没有')
                                                }
                                                </div>
                                            </div>
                                        </div>
        
                                    );
                                }}
                            />
                        </Scroller>
                        {/*//底部导航tab*/}
                        <Footer />
                    </div>
        )
    }
}

export default HomePage;
